<template>
  <div
    id="app"
    class="main"
  >
    <div class="nav">
      目标通信管道数据
    </div>
    <div class="nav_btn">
      <div class="btn_left">
        <div
          class="sel_btn"
          @click="openDialog"
        >
          {{ buttonName }}
          <i
            class="el-icon-arrow-down"
            color="#0efcff"
          />
        </div>
        <div
          v-if="showDialog"
          class="list-dialog"
        >
          <el-checkbox
            v-model="checkAll"
            text-color="#0EFCFF"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
            国家高速
          </el-checkbox>
          <div style="margin: 15px 0;" />
          <el-checkbox-group
            v-model="checkedCities"
            text-color="#0EFCFF"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="city in cities"
              :key="city"
              text-color="#0EFCFF"
              :label="city"
            >
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
          <!-- 字段2 -->
          <br>
          <el-checkbox
            v-model="checkAll1"
            text-color="#0EFCFF"
            :indeterminate="isIndeterminate1"
            @change="handleCheckAllChange1"
          >
            分公司
          </el-checkbox>
          <div style="margin: 15px 0;" />
          <el-checkbox-group
            v-model="checkedCities1"
            text-color="#0EFCFF"
            @change="handleCheckedCitiesChange1"
          >
            <el-checkbox
              v-for="city in cities1"
              :key="city"
              text-color="#0EFCFF"
              :label="city"
            >
              {{ city }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="btn_right">
        <a href="http://texasbarbecue.gitee.io/bigscreen1/">
          <div class="btn_list">通信管道总览数据</div>
        </a>
      </div>
    </div>
    <div class="content">
      <div class="centerBox">
        <div
          class="baseBox centerMainBox1"
          style="height:70%"
        >
          <div class="baseBoxLeft left">
            <div class="boxTitle">
              {{ leftTitle }}
            </div>
            <img
              src="../assets/img/left.png"
              alt=""
            >
            <div class="equipment-box">
              <table class="equipment_table env_table table_left">
                <tr>
                  <td>管道编号</td>
                  <td>管道色标</td>
                  <td>使用情况</td>
                  <td>租赁费用</td>
                  <td>具体业务</td>
                </tr>
                <tr
                  v-for="(item, i) in leftList"
                  :key="i"
                  @click="clickTr($event,item)"
                >
                  <td>{{ item.Num }}</td>
                  <td>{{ item.Color }}</td>
                  <td>{{ item.Use }}</td>
                  <td>{{ item.Fee }}</td>
                  <td>{{ item.Business }}</td>
                </tr>
              </table>
            </div>
            <div class="equipment-info">
              <p>是否存在路由变更：是</p>
              <p>是否存在桥涵：是</p>
              <p>是否存在其他安全隐患：否</p>
              <p>相邻或相交互通情况：良好</p>
              <p>硅芯管位置（中分带或路肩）：中分带</p>
              <p>预留管道情况：有预留</p>
            </div>
            <div
              id="wind"
              style="width:95%;height:50%;margin-left:2.5%"
            />
          </div>
          <div class="baseBoxRight right">
            <div class="title-info">
              <p class="liP">
                <span>是否属于集团管辖路段：是</span>
                <span>目标租赁路段单位：A单位</span>
                <span>路段名称+管理公司/分公司：焦唐高速巩登段-高发郑州分公司</span>
              </p>
            </div>
            <ul class="plant">
              <li>
                <a
                  class="jumps"
                  href="./teaGarden.html"
                >
                  <div class="clear plantTop ">
                    <span class="flexLeft">管辖路程（KM）</span>
                    <img
                      class="flexright"
                      src="../assets/img/cy.png"
                      alt=""
                    >
                  </div>

                  <p class=" plantNum1">43.264</p>
                  <span class="spans0" />
                </a>
              </li>
              <li>
                <a
                  class="jumps"
                  href="./Tea-enterprises.html"
                >
                  <div class="clear plantTop ">
                    <span class="flexLeft">起始桩号（KM）</span>
                    <img
                      class="flexright"
                      src="../assets/img/cq.png"
                      alt=""
                    >
                  </div>
                  <p class=" plantNum1">K49+300</p>
                  <span class="spans1" />
                </a>
              </li>
              <li>
                <a
                  class="jumps"
                  href="./teaPeasant.html"
                >
                  <div>
                    <span>终端桩号（KM）</span>
                    <img
                      src="../assets/img/cn.png"
                      alt=""
                    >
                  </div>
                  <p class="">K92+567</p>
                  <span class="spans2" />
                </a>
              </li>
              <li>
                <a
                  class="jumps"
                  href="./Tea-enterprises.html"
                >
                  <div class="clear plantTop ">
                    <span class="flexLeft">段起始桩号</span>
                    <img
                      class="flexright"
                      src="../assets/img/cq.png"
                      alt=""
                    >
                  </div>
                  <p class=" plantNum1">K49+300</p>
                  <span class="spans1" />
                </a>
              </li>
              <li>
                <a
                  class="jumps"
                  href="./teaPeasant.html"
                >
                  <div>
                    <span>段终端桩号</span>
                    <img
                      src="../assets/img/cn.png"
                      alt=""
                    >
                  </div>
                  <p class="">K57+070</p>
                  <span class="spans2" />
                </a>
              </li>
              <li>
                <a
                  class="jumps"
                  href="./teaPeasant.html"
                >
                  <div>
                    <span>段人手孔数</span>
                    <img
                      src="../assets/img/cn.png"
                      alt=""
                    >
                  </div>
                  <p class="">8</p>
                  <span class="spans2" />
                </a>
              </li>
            </ul>
            <!-- 地图 -->
            <div
              id="boxMap"
              class="map"
            />
          </div>
        </div>

        <div
          class="baseBox centerMainBox2"
          style="height:30%;"
        >
          <img
            src="../assets/img/down.png"
            alt=""
          >
          <div
            class="boxTitle2"
            style="width:26%"
          >
            合同信息
          </div>
          <div class="csbaseBox1">
            <div class="contract-data">
              <table
                class="tableDetalis"
                style="color: #00ddfe"
              >
                <tr v-if="contractData.length > 0">
                  <td>高速公路</td>
                  <td>桩号</td>
                  <td>里程（KM）</td>
                  <td>租赁费用</td>
                  <td>合同时间</td>
                </tr>
                <tr
                  v-for="(item, i) in contractData"
                  :key="i"
                >
                  <td>{{ item.Road }}</td>
                  <td>{{ item.Num }}</td>
                  <td>{{ item.Mileage }}</td>
                  <td>{{ item.Fee }}</td>
                  <td>{{ item.Time }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div
        class="leftBox right"
        style="width:22%"
      >
        <!-- <div class="baseBox baseBox1" style="margin-bottom:15px;height:40%">
                    <img src="../assets/img/right.png" alt="">
                    <div class="csbaseBox1">
                        <div class="boxTitle">视频监控设备</div>
                    </div>
                </div> -->
        <div
          class="baseBox baseBox2"
          style="margin-bottom:15px;height:29.5%"
        >
          <img
            src="../assets/img/right2.png"
            alt=""
          >
          <!-- 四个角描边 end -->
          <div class="boxTitle2">
            全链路数据
          </div>
          <div class="boxRader">
            <table
              v-if="linkData.length > 0"
              class="equipment_table env_table"
            >
              <tr>
                <td>人手孔编号</td>
                <td>状态</td>
                <td>租赁公司</td>
                <td>租赁用途</td>
                <td>租赁到期时间</td>
              </tr>
              <tr
                v-for="(item, i) in linkData"
                :key="i"
              >
                <td>{{ item.Num }}</td>
                <td>{{ item.Status }}</td>
                <td>{{ item.Company }}</td>
                <td>{{ item.Use }}</td>
                <td>{{ item.EndTime }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import drawMixin from "../utils/drawMixin";
// import { formatTime } from '../utils/index.js'
// 引入echarts
import echarts from 'echarts'
// 引入echarts-extension-amap
import 'echarts-extension-amap'
export default {
  components: {
  
  },
  // mixins: [ drawMixin ],
  data() {
    return {
      leftTitle: 'K49+850',
      leftList: [{
        Num: 1,
        Color: '红X2',
        Use: '自用',
        Fee: '',
        Business: '收费'
      }, {
        Num: 2,
        Color: '黄X2',
        Use: '自用',
        Fee: '',
        Business: '监控'
      }, {
        Num: 3,
        Color: '绿X2',
        Use: '自用',
        Fee: '',
        Business: ''
      }, {
        Num: 4,
        Color: '蓝X2',
        Use: '自用',
        Fee: '',
        Business: ''
      }, {
        Num: 5,
        Color: '紫X2',
        Use: '空闲',
        Fee: '',
        Business: ''
      }, {
        Num: 6,
        Color: '白X2',
        Use: '空闲',
        Fee: '',
        Business: ''
      }, {
        Num: 7,
        Color: '红X2',
        Use: '空闲',
        Fee: '',
        Business: ''
      }, {
        Num: 8,
        Color: '黄X4',
        Use: '空闲',
        Fee: '',
        Business: ''
      }, {
        Num: 9,
        Color: '绿X4',
        Use: '空闲',
        Fee: '',
        Business: ''
      }, {
        Num: 10,
        Color: '蓝X4',
        Use: '空闲',
        Fee: '',
        Business: ''
      }, {
        Num: 11,
        Color: '紫X4',
        Use: '空闲',
        Fee: '',
        Business: ''
      }, {
        Num: 12,
        Color: '白X4',
        Use: '空闲',
        Fee: '',
        Business: ''
      }],
      linkData: [],
      linkArray: [
        [{
          Num: 'G30/K258+881',
          Status: '租赁',
          Company: '中国移动',
          Use: '通信',
          EndTime: '2023-05-01'
        }, {
          Num: 'G30/K258+881',
          Status: '自用',
          Company: '中国移动',
          Use: '通信',
          EndTime: '2023-05-01'
        }, {
          Num: 'G30/K258+881',
          Status: '租赁',
          Company: '中国移动',
          Use: '通信',
          EndTime: '2023-05-01'
        }, {
          Num: 'G30/K258+881',
          Status: '租赁',
          Company: '中国移动',
          Use: '通信',
          EndTime: '2023-05-01'
        }, {
          Num: 'G30/K258+881',
          Status: '租赁',
          Company: '中国移动',
          Use: '通信',
          EndTime: '2023-05-01'
        }],
        [
          {
          Num: 'G31/K258+881',
          Status: '租赁',
          Company: '中国移动',
          Use: '通信',
          EndTime: '2023-05-01'
        }, {
          Num: 'G31/K258+881',
          Status: '自用',
          Company: '中国移动',
          Use: '通信',
          EndTime: '2023-05-01'
        }, {
          Num: 'G31/K258+881',
          Status: '租赁',
          Company: '中国移动',
          Use: '通信',
          EndTime: '2023-05-01'
        }, {
          Num: 'G31/K258+881',
          Status: '租赁',
          Company: '中国移动',
          Use: '通信',
          EndTime: '2023-05-01'
        }, {
          Num: 'G31/K258+881',
          Status: '租赁',
          Company: '中国移动',
          Use: '通信',
          EndTime: '2023-05-01'
        }],[
          {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }, {
            Num: 'G32/K258+881',
            Status: '自用',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }, {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }, {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }, {
            Num: 'G32/K258+881',
            Status: '租赁',
            Company: '中国移动',
            Use: '通信',
            EndTime: '2023-05-01'
          }]
      ],
      loading: true,
      showDialog: false,
      isShow: true,
      showDetailInfo: false,
      name: '',
      cityOptions: ['京港澳高速', '连霍高速', '济广高速', '宁洛高速', '沪陕高速', '大广高速', '二广高速', '德上新建高速', '郑州西南环城高速', '长济高速', '郑州机场路', '南林高速', '范辉高速', '新济高速'],
      buttonName: '请选择',
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      cityOptions1: ['安新分公司', '恒淮分公司', '开封分公司', '洛阳分公司', '南阳分公司', '三门峡分公司', '商丘分公司', '桃花峪黄河大桥', '信阳分公司', '禹登分公司'],
      checkAll1: false,
      checkedCities1: [],
      cities1: [],
      isIndeterminate1: true,
      contractData: [{
        Road: '焦桐高速、大禹高速',
        Num: 'K55+800-K92、K794+638-K792+400',
        Mileage: '38.438',
        Fee: '230.6280',
        Time: '2022-11-8至2037-11-7'
      }, {
        Road: '沪陕高速',
        Num: 'K793-K1283',
        Mileage: '520',
        Fee: '31199959.44',
        Time: '2023-10-1至2038-9-30'
      }, {
        Road: '京港澳高速',
        Num: 'K1005+100-K1007+500',
        Mileage: '2.4',
        Fee: '2143999.81',
        Time: '2023-1-11至2038-1-10'
      }, {
        Road: '焦桐高速、盐洛高速',
        Num: 'K57+500-K92、K794+638-K791+500',
        Mileage: '37.638',
        Fee: '2258449.37',
        Time: '2022-6-1至2037-5-31'
      }, {
        Road: '连霍高速',
        Num: 'K283+718-K610+300',
        Mileage: '326.5',
        Fee: '514.2375',
        Time: '2022-5-26至2037-5-25'
      },
      ]
    }
  },
  created() {
    window.detail = () => {
      this.showDetail()
    }
  },
  mounted() {
    this.cities = this.cityOptions
    this.cities1 = this.cityOptions1
    this.map()
    window.clickToScreen = this.clickToScreen
  },
  beforeDestroy () {
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : [];
      this.isIndeterminate = false;
      this.buttonName = this.checkedCities[0] ? this.checkedCities[0].slice(0, 5) + '...' : '请选择'
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      this.buttonName = this.isIndeterminate
      this.buttonName = this.checkedCities.length > 0 ? (this.checkedCities[0].length > 5 ? this.checkedCities[0].slice(0, 5) + '...' : this.checkedCities.length > 1 ? this.checkedCities[0] + '...' : this.checkedCities[0]) : '请选择'
    },
    handleCheckAllChange1(val) {
      this.checkedCities1 = val ? this.cityOptions1 : [];
      this.isIndeterminate1 = false;
      this.buttonName = this.checkedCities1[0] ? this.checkedCities1[0].slice(0, 5) + '...' : '请选择'
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount1 = value.length;
      this.checkAll1 = checkedCount1 === this.cities1.length;
      this.isIndeterminate1 = checkedCount1 > 0 && checkedCount1 < this.cities1.length;
      console.log(3333,this.checkedCities1[0])
      this.buttonName = this.checkedCities1.length > 0 ? (this.checkedCities1[0].length > 5 ? this.checkedCities1[0].slice(0, 5) + '...' : this.checkedCities1.length > 1 ? this.checkedCities1[0] + '...' : this.checkedCities1[0]) : '请选择'
    },

    map2 () {
      this.map = new window.AMap.Map("boxMap", {
            center: [106.25936, 29.29014],
            zoom: 12,
            zooms: [3, 20],
            expandZoomRange: true,
            mapStyle: "amap://styles/darkblue",
          });
          var options = {
            subdistrict: 0,
            extensions: "all",
            level: "district",
          };
          var district = new AMap.DistrictSearch(options);
      console.log("地图区域", district.search());
      district.search("江津区", (status, result) => {
            var outer = [
              new window.AMap.LngLat(-360, 90, true),
              new window.AMap.LngLat(-360, -90, true),
              new window.AMap.LngLat(360, -90, true),
              new window.AMap.LngLat(360, 90, true),
            ];
            var holes = result.districtList[0].boundaries;

            var pathArray = [outer];
            pathArray.push.apply(pathArray, holes);
            var polygon = new window.AMap.Polygon({
              pathL: pathArray,
              //线条颜色，使用16进制颜色代码赋值。默认值为#006600
              strokeColor: "rgb(20,164,173)",
              strokeWeight: 4,
              //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
              strokeOpacity: 0.5,
              //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
              fillColor: "rgba(0,0,0)",
              //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
              fillOpacity: 1,
              //轮廓线样式，实线:solid，虚线:dashed
              strokeStyle: "solid",
              /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在    
              ie9+浏览器有效 取值： 
              实线：[0,0,0] 
              虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
              点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 
              线和10个像素的空白 （如此反复）组成的虚线*/
              strokeDasharray: [10, 2, 10],
            });
            polygon.setPath(pathArray);
            this.map.add(polygon);
          });
    },
    openDialog() {
      let icon = document.getElementsByClassName("el-icon-arrow-down")[0]
      if (icon.classList.contains("arrow")){
        icon.classList.replace("arrow", "arrow-up");
      } else if (icon.classList.contains("arrow-up")){
        icon.classList.replace("arrow-up", "arrow");
      } else {
        icon.classList.add("arrow");
      }
      if(this.showDialog) {
        this.showDialog = false
      } else {
        this.showDialog = true
      }
      console.log(this.showDialog)
    },
    clickTr(e,data) {
      console.log(e)
      // e.target.style.background = 'red'
      this.linkData = []
      if (data.Num < 3) {
        console.log(111)
        this.linkData = this.linkArray[data.Num - 1]
      } else {
        console.log(222)

        this.linkData = this.linkArray[2]
      }
    },
    clickToScreen() {
      window.open('http://texasbarbecue.gitee.io/bigscreen', '_blank')
    },
    setLayer (map) {
      var district = new window.window.AMap.DistrictSearch(options)
      // 查询河南省区域
      district.search('焦作市', function(status, result) {
        var bounds = result.districtList[0]['boundaries']
       // 添加描边
       var mask = new AMap.Polygon({
          path: bounds,  // 边界坐标点集合
          fillColor: '#3078AC',  // 填充色
            // strokeColor: '#3078AC',
          fillOpacity: 0.8,      // 填充透明度
          strokeWeight: 3,       // 边框宽度，设为 0 表示没有边框
          zIndex: 1000            // 显示优先级，越大越靠上层
        });
        map.add(mask);
       
      })
      
    },
    map() {
      let that = this
      var data = [
        { name: 'K49+850', value: 148 },
        { name: 'K50+516', value: 152 },
        { name: 'K51+516', value: 153 },
        { name: 'K52+516', value: 154 },
        { name: 'K53+516', value: 154 }
      ]
      var geoCoordMap = {
        'K49+850': [114.3181, 35.5761],
        'K50+516': [114.6281, 35.0561],
        'K51+516': [114.5981, 34.3161],
        'K52+516': [114.3181, 33.9761],
        'K53+516': [113.3891, 33.5281]
      }
      const lines = [
        [1143181, 355761],
        [1146281, 350561],
        [1145981, 343161],
        [1143181, 339761],
        [1133891, 335281]
      ]
      let prevPt = []
      const roadLines = [].concat.apply(
        [],
        lines.map(function(busLine, idx) {
          const points = []
          for (let i = 0; i < busLine.length; i += 2) {
            let pt = [busLine[i], busLine[i + 1]]
            if (i > 0) {
              pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]]
            }
            pt = [pt[0] / 1e4, pt[1] / 1e4]
            if (idx === 0) prevPt = pt
            points.push(prevPt, pt)
            prevPt = pt
          }
          return {
            coords: points
          }
        })
      )
      var color = [
        { name: 'gr', color: '#00E400' },
        { name: 'yel', color: '#FFFF00' },
        { name: 'or', color: '#FF7E00' },
        { name: 'red', color: '#FF0000' },
        { name: 'pu', color: '#99004C' },
        { name: 'hh', color: '#7E0023' },
        { name: 'mo', color: '#5CC0D4' }// 监控点位颜色
      ]
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      }
      var option
      option = {// 加载 amap 组件
        title: {
          text: '路段分布',
          subtext: '',
          sublink: '',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          show: true,
          // alwaysShowContent: false,
          enterable: true, // 鼠标可以进入
          // backgroundColor: 'rgba(255,255,255,0.0)', // 通过设置rgba调节背景颜色与透明度
          backgroundColor: 'rgba(22, 78, 95,0.9)', // 通过设置rgba调节背景颜色与透明度
          position: function(point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0 // x坐标位置
            var y = 0 // y坐标位置
            // 当前鼠标位置
            var pointX = point[0]
            var pointY = point[1]
            // 提示框大小
            var boxWidth = size.contentSize[0]
            var boxHeight = size.contentSize[1]
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5
            } else { // 左边放的下
              x = pointX - boxWidth
            }
            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5
            } else { // 上边放得下
              y = pointY - boxHeight
            }
            return [x, y]
          },
          formatter: function() {
            var infos = {
              IsOnline: 1,
              Num: 1,
              Mark: 'K49+850',
              Index: '001',
              PsAlias: '焦唐高速巩登段-高发郑州分公司-巩义南收费站',
              AttentionDegreeName: '监测点',
              PointCount: 12,
              Change: '是',
              Bridge: '是',
              Others: '存在绿化、损毁等管道损坏情况',
              Sibling: '',
              Position: '中央隔离带',
              Reserved: '',
              EquipmentCount: '红外摄像头',
              ProductionDateStr: '20230501'
            }
            if (infos != undefined) {
              // self.$parent.setQualityData && self.$parent.setQualityData(infos.Qualitys, infos.PsAlias)
              var bgClass = ''
              if (infos.IsOnline == '0') {
                bgClass = 'mapbox-re'
              } else { bgClass = 'mapbox-bl' }
              var colorcss1 = ''
              switch (true) {
                case infos.IsOnline == '0':
                  colorcss1 = color.filter(item => item.name === 'red')[0].color
                  break
                default:
                  colorcss1 = color.filter(item => item.name === 'gr')[0].color
                  break
              }
              // let isDetail = this.showDetailInfo
              var tipHtml = '<div class="mapbox-pop id="map-dialog"' + bgClass + '"  >' +
                '<h5 style="color:' + colorcss1 + ';"> ' + infos.PsAlias + '</h5>' +
                '<div class="gis-data">' +
                '<p>状态：' + (infos.IsOnline == '1' ? '自用' : '租赁否') + '</p>' +
                '</div>' +
                `<img style="width:97px;height:82px;float:left;" src="${require('@/assets/pointPic.png')}">` +'<p>人手孔序号：' + infos.Num+ '</p>' +'<p>人手孔桩号：' + infos.Mark+ '</p>' +'<p>人手孔编号：' + infos.Index+ '</p>' +
                infos.Mark+ '</p>' + (!that.showDetailInfo ? ('<p onclick="detail()" style="color:blue">详细信息</p>') : ('<p ref="add">是否存在路由变更：' + infos.Change+ '</p>' +'<p>是否存在桥涵：' + infos.Bridge+ '</p>' +'<p>是否存在其他隐患：' + infos.Others+ '</p>' +'<p>相邻或相交互通情况：' + infos.Bridge+ '</p>' +'<p>硅芯管位置（中央隔离带或路肩）：' + infos.Position+ '</p>' +'<p>预留管道情况：' + infos.Reserved+ '</p>' ))+
                '<div>' +
                '</div>' +
                '</div >'
              return tipHtml
            }
            return ''
          },
          triggerOn: 'click'
        },
        amap: {
          // 3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验
          viewMode: '3D',
          // 高德地图中心经纬度
          center: [113.624129, 34.160339],
          expandZoomRange:true,
          // 高德地图缩放
          zoom: 8,
          // 启用resize
          resizeEnable: true,
          // 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
          renderOnMoving: false,
          // 自定义地图样式主题(不管用？)
          mapStyle: 'amap://styles/darkblue', // 高德地图的主题
          // mapStyle: 'amap://styles/9b21d96f3c0de07ed0e51664b490b169',
          // ECharts 图层的 zIndex 默认 2000
          // 从 v1.9.0 起 此配置项已被弃用 请使用 `echartsLayerInteractive` 代替
          echartsLayerZIndex: 2019,
          // 设置 ECharts 图层是否可交互 默认为 true
          // 设置为 false 可实现高德地图自身图层交互
          // 此配置项从 v1.9.0 起开始支持
          echartsLayerInteractive: true,
          // 是否启用大数据模式 默认为 false
          // 此配置项从 v1.9.0 起开始支持
          largeMode: false
          // 说明：如果想要添加卫星、路网等图层
          // 暂时先不要使用layers配置，因为存在Bug
          // 建议使用amap.add的方式，使用方式参见最下方代码
        },
        animation: true,
        series: [
          {
            name: '路段信息',
            type: 'effectScatter',
            coordinateSystem: 'amap',
            // data: convertData(data.sort(function(a, b) {
            //   return b.value - a.value
            // }).slice(0, 10)),
            data: convertData(data),
            // symbolSize: function(val) {
            //   return Math.log2(val[2])
            // },
            symbolSize: function(val) {
              return val[2] / 10
            },
            encode: {
              value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            itemStyle: {
              color: '#00c1de',
              shadowBlur: 10,
              shadowColor: '#333'
            },
            emphasis: {
              scale: true
            },
            zlevel: 1
          },
          {
            type: 'lines',
            coordinateSystem: 'amap',
            data: roadLines,
            polyline: true,
            lineStyle: {
              color: 'orange',
              opacity: 0.6,
              width: 2
            }
          }
        ]
      }
      console.log('option', option)
      // @ts-ignore
      var myChart = echarts.init(document.getElementById('boxMap'))
      myChart.setOption(option)
    },
    showDetail(e) {
      console.log(e)
      this.showDetailInfo = true
      this.map()
      let dialog = document.getElementById('map-dialog')
      console.log(dialog)
    }
  }
}
</script>

<style lang="scss">
    .boxRader {
        position: relative;
        width: 100%;
        height: 80%;
    }

    .centerBox {
        width: 75%;
        margin-right: 15px;
        background: transparent;
    }

    .boxFont {
        font-size: 1.2vw;
    }

    .centerMainBox1 {
        width: 100%;
        height: 60.5%;
    }

    .centerMainBox2 {
        width: 100%;
        height: 38.5%;
        position: relative;
        margin-top: 15px;
    }

    .centerMainBox2 img {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .boxTitle2 {
        width: 100%;
        height: 10%;
        font-size: .6vw;
        text-align: center;
        line-height: 10%;
        margin-top: 1vw;
        color: #0efcff;
    }

    .boxLis {
        width: 70%;
        height: 1.5vw;
        margin-left: 3vw;
        margin-top: 1vw;
        border-bottom: .02vw solid rgb(40, 229, 233);
    }

    .boxLis>li {
        width: 4vw;
        height: 1.4vw;
        display: block;
        background: rgba(40, 229, 233, .5);
        margin-right: .5vw;
        color: #fff;
        line-height: 1.4vw;
        text-align: center;
        cursor: pointer;
    }

    .active {
        border-bottom: .02vw solid #040A18;
        border-top: .02vw solid rgb(40, 229, 233);
        border-right: .02vw solid rgb(40, 229, 233);
        border-left: .02vw solid rgb(40, 229, 233);
    }
    .btn_left {
      position: relative;
    }
    .sel_btn {
      position: absolute;
      height: 26px;
      width: 100px;
      background: transparent;
      color: #0EFCFF;
      border: 1px solid #0efcff;
      border-radius: 3px;
      // font-size: 14px;
      line-height: 26px;
      padding: 3px 10px;
      overflow: hidden;
      margin: 3px 0 5px 10px;
    }
    .sel_btn i {
      float: right;
      line-height: 26px;
    }
    .arrow {
      transform: rotate(180deg);
      transition: all 0.5s;
    }
    .arrow-up {
      transform: rotate(0deg);
      transition: all 0.5s;
    }
    .list-dialog {
      position: absolute;
      z-index: 999;      
      top: 45px;
      left: 10px;
      background: #164e5f;
      padding: 10px;
      font-size: 14px;
      line-height: 16px;
      color: #fff;
    }
    .el-checkbox__input .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border-color: #0efcff !important;
      color: #0EFCFF!important;
      background-color: #164e5f !important;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border-color: #0efcff !important;
      color: #0EFCFF!important;
      background-color: #164e5f !important;
    }
    .el-checkbox.is-checked .el-checkbox__label {
      color: #0EFCFF!important;
    }
    .el-checkbox .el-checkbox__label {
      color: #fff!important;
    }
    
    .el-checkbox__inner:hover {
      border-color: #0efcff !important;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #0efcff !important;
    }
    .contList {
        position: relative;
        width: 70%;
        height: 7vw;
        margin: 1vw auto 0;

    }
    .el-checkbox-group {
      width: 470px;
      display: flex;
      flex-wrap: wrap;
    }
    .el-checkbox-group .el-checkbox {
      width: 200px;
    }
    .content1 li {
        display: none;
    }

    .baseBox {
        width: 100%;
        border: none;
        background: none;
    }

    .boxTitle {
        font-size: .8vw;
        width: 38%;
        margin-top: 1vw;
        text-align: center;
    }

    .right {
        float: right;
    }

    .baseBoxLeft {
        width: 30%;
        height: 95%;
        position: relative;
    }

    .baseBoxRight {
        width: 68%;
        height: 75%;
    }

    .baseBoxLeft img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
    }

    .maps {
        width: 100%;
        height: 95%;
        margin-top: 2%;
        background: pink;
    }

    .baseBox1,
    .baseBox2,
    .baseBox3 {
        position: relative;
    }

    .baseBox1 img,
    .baseBox2 img,
    .baseBox3 img {
        position: absolute;
        width: 100%;
        height: 125%;
    }

    .csbaseBox1 {
        position: relative;
        z-index: 999;
    }
 
  .liSpan {
      width: 100%;
      margin-top: 3.2%;
      text-align: center;
      color: rgb(40, 229, 233);
  }

  .liP {
      width: 90%;
      margin: .3vw auto 0;
      text-align: left;
      font-size: .5vw;
      color: rgb(40, 229, 233);
      display: flex;
      justify-content: space-around;
  }

  a:hover {
      text-decoration: none
  }

  .titleName {
      color: #0EFCFF;
  }

  /* 种植 */
  .plant {
      width: 90%;
      height: 5.5vw;
      margin: 2% auto 0;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
  }

  .plant>li {
      width: 15%;
      height: 100%;
  }

  .jumps {
      width: 100%;
      height: 100%;
      background: rgba(0, 235, 255, .08);
      display: -webkit-flex;
      -webkit-flex-direction: column;
      -webkit-justify-content: space-between;
      display: -moz-flex;
      -moz-flex-direction: column;
      -moz-justify-content: space-between;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  .jumps>div>img {
      width: .88vw;
      height: .88vw;
      float: right;
  }

  .jumps>p {
      width: 90%;
      font-size: 1.3vw;
      color: #fff;
      margin: auto;

  }

  .jumps>div {
      width: 90%;
      margin: 5% auto 0;
  }

  .jumps>div>span {
      font-size: .6vw;
      color: #0efcff;
      float: left;
  }

  .spans0 {
      width: 80%;
      height: 5%;
      background: #03DA8D;
  }

  .spans1 {
      width: 80%;
      height: 5%;
      background: #0efcff;
  }

  .spans2 {
      width: 80%;
      height: 5%;
      background: #FE0000;
  }

  .spans3 {
      width: 80%;
      height: 5%;
      background: #F78001;
  }

  .boxVideo {
      width: 100%;
      height: 100%;
  }

  .boxVideo video {
      width: 100%;
      height: 100%;

  }

  .baseDatas {
      width: 70%;
      height: 2vw;
      display: -webkit-flex;
      -webkit-justify-content: space-between;
      margin: 1vw 0 0 5vw;

  }

  .baseDatas li {
      width: 10%;
  }

  .baseDatas li a {
      color: #fff;
      font-size: .8vw;
  }

  .active2 a>span {
      color: rgb(40, 229, 233);
  }

  .baseDatas li a:hover>span {
      color: rgb(40, 229, 233);
  }

  .baseDatas li a:hover>.borderRight {
      border-left-color: rgb(40, 229, 233);
  }
  .contract-data {
    width: 99.8%;
    height: 195px;
    overflow-y: scroll;
  }
  .contract-data::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background-color: transparent;
  }
  .contract-data::-webkit-scrollbar-thumb{
    background-color: #0EFCFF;
  }
  .tableDetalis {
      width: 92%;
      color: #fff;
      margin-left: 2vw;
  }

  .tableDetalis tr {
      height: 1.3vw;
      font-size: .8vw;
  }

  .tableDetalis tr>td {
      text-align: center;
  }

  .tableDetalis tr>td:nth-child(7) {
      text-align: right;
  }

  .borderRight {
      width: 0;
      height: 0;
      float: left;
      border: .4vw solid transparent;
      border-left-color: #fff;
      margin-top: .2vw;
  }

  .borderActive {
      border-left-color: rgb(40, 229, 233);
      color: rgb(10, 12, 17);
  }
  .equipment-data {
    width: 99.8%;
    height: 50%;
    overflow-y: scroll;
  }
  .equipment-data::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background-color: transparent;
  }
  .equipment-data::-webkit-scrollbar-thumb{
    background-color: #0EFCFF;
  }
  .equipment-box {
    position: absolute;
    top: 48px;
    z-index: 99;
    width: 100%;
    height: 60%;
    // border: 1px solid #0EFCFF;
    overflow-y: scroll ;
  }
  .equipment-info {
    z-index: 99;
    position: absolute;
    top: 380px;
    color: #0EFCFF;
    font-size: 14px;
    line-height: 18px;
    padding-left: 25px;
  }
  .equipment-box::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background-color: transparent;
  }
  .equipment-box::-webkit-scrollbar-thumb{
    background-color: #0EFCFF;
  }
  .equipment_table {
      width: 95%;
      height: 25%;
      overflow-y: scroll;
      margin: auto;
      text-align: center;
      color: #fff;
      font-size: .5vw;
      z-index: 99;
  }

  .equipment_table tr:nth-child(1) {
      color: #0EFCFF;
  }

  .equipment_table tr {
      height: 35px!important;
      border: 1px solid#0EFCFF;
  }
  .table_left  tr {
    border: 0;
  }
  .equipment_table tr:nth-child(1) {
      font-size: .8vw;
  }

  .equipment_table img {
      width: 1vw;
  }

  .env_table {
      height: 78%; 
      margin-top: 5%;
  }
  .env_table  tr {
      height: 35px!important;
  }
  .env_table td {
      border: 1px solid#0EFCFF;
  }
  .table_left td {
    border: 0;
  }
  .env_table tr:nth-child(1) {
      background: rgba(14, 252, 255, .3);
  }
  .map {
    height: 450px;
    margin: 10px auto;
  }

  .mapContentFont {
      width: 85%;
      margin-left: 12%;
      font-size: .6vw;
      color: #0efcff;
      letter-spacing: .05vw;
      margin-bottom: .3vw;
  }

  .mapContentFont:nth-child(1) {
      margin-top: .6vw;
  }

  .mapContentFont span {
      color: white;
  }

</style>
